<template>
  <view class="detail-container">
    <view class="loading" v-if="orderInfo.loading">加载中...</view>
    <ve-card title="交车信息" type="none" fold v-else-if="orderInfo.giveCarInfoDto">
      <ve-cell label="交车里程">{{ orderInfo.giveCarInfoDto.startCarMileage || '-' }}公里</ve-cell>
      <ve-cell-val label="交车油(电)量" :value="orderInfo.giveCarInfoDto.startCarOil" />
      <ve-cell label="交车人">{{ orderInfo.giveCarInfoDto.giveStaffName || '-' }}</ve-cell>
      <ve-cell label="交车时间">{{ orderInfo.giveCarInfoDto.useStartTime || '-' }}</ve-cell>
      <ve-cell label="交车里程/油电量照片" layout="vertical">
        <ve-upload disabled v-model="orderInfo.giveCarInfoDto.giveMilesFileId"></ve-upload>
      </ve-cell>
      <ve-cell label="交车照片" layout="vertical">
        <ve-upload disabled v-model="orderInfo.giveCarInfoDto.giveFileIds"></ve-upload>
      </ve-cell>
      <ve-cell label="OTA交车照片" layout="vertical">
        <otaImgPreview :urlList="orderInfo.giveCarInfoDto.giveOtaFileUrls" />
      </ve-cell>
      <ve-cell label="交车视频" layout="vertical">
        <ve-upload-video v-model="orderInfo.giveCarInfoDto.giveVideoFileIds" :readonly="true" />
      </ve-cell>
      <ve-cell label="OTA交车视频" layout="vertical">
        <otaVideoPreview :urlList="orderInfo.giveCarInfoDto.giveVideoOtaFileUrls" />
      </ve-cell>
      <ve-cell label="交车备注">{{ orderInfo.giveCarInfoDto.useStartRemark || '-' }}</ve-cell>
    </ve-card>
    <ve-empty v-else></ve-empty>

    <ve-card title="还车信息" type="none" fold v-if="orderInfo.returnCarInfoDto">
      <ve-cell label="还车里程">{{ orderInfo.returnCarInfoDto.endCarMileage || '-' }}公里</ve-cell>
      <ve-cell-val label="还车油(电)量" :value="orderInfo.returnCarInfoDto.endCarOil" />
      <ve-cell label="还车人">{{ orderInfo.returnCarInfoDto.returnStaffName || '-' }}</ve-cell>
      <ve-cell label="还车时间">{{ orderInfo.returnCarInfoDto.useEndTime || '-' }}</ve-cell>
      <ve-cell label="还车里程/油电量照片" layout="vertical">
        <ve-upload disabled v-model="orderInfo.returnCarInfoDto.returnMilesFileId"></ve-upload>
      </ve-cell>
      <ve-cell label="还车照片" layout="vertical">
        <ve-upload disabled v-model="orderInfo.returnCarInfoDto.returnFileIds"></ve-upload>
      </ve-cell>
      <ve-cell label="OTA还车照片" layout="vertical">
        <otaImgPreview :urlList="orderInfo.returnCarInfoDto.returnOtaFileUrls" />
      </ve-cell>
      <ve-cell label="还车视频" layout="vertical">
        <ve-upload-video v-model="orderInfo.returnCarInfoDto.returnVideoFileIds" :readonly="true" />
      </ve-cell>
      <ve-cell label="OTA还车视频" layout="vertical">
        <otaVideoPreview :urlList="orderInfo.returnCarInfoDto.returnVideoOtaFileUrls" />
      </ve-cell>
      <ve-cell label="还车备注">{{ orderInfo.returnCarInfoDto.useEndRemark || '-' }}</ve-cell>
    </ve-card>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { shortorderdetail } from '@/api/dict/detail'
  import otaImgPreview from '@/components/ota-img-preview.vue'
  import otaVideoPreview from '@/components/ota-video-preview.vue'

  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })

  const orderInfo = ref({
    loading: true,
  })
  const getDetail = async () => {
    const id = props.orderId
    const res = await shortorderdetail({ id: id })
    const result = res.result
    orderInfo.value = result.orderInfo
  }

  onMounted(() => {
    getDetail()
  })
</script>

<style lang="scss" scoped>
  .loading {
    text-align: center;
  }
  .detail-container {
    padding: 24rpx;
  }
</style>
